/* 
* @Author: 
*/
    function upload(className){
        $('.'+className).uploadView({
            uploadBox: '.js_uploadBox',//设置上传框容器
            showBox : '.js_showBox',//设置显示预览图片的容器
            width : 160, //预览图片的宽度，单位px
            height : 120, //预览图片的高度，单位px
            allowType: ["gif", "jpeg", "jpg", "bmp", "png"], //允许上传图片的类型
            maxSize :2, //允许上传图片的最大尺寸，单位M
            success:function(e){
                $.toast({
                    text: '上传成功',
                    type: 'success',
                    position: 'top cengten'
                }).show();
            }
        });
    }


    $(window).load(function() {
        var options =
        {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: ''
        };
        var img_count = $('.zi-small-imglist');
        var imgnum = img_count.length;
        var cropper = $('.imageBox').cropbox(options);
        var imgStr="";
        $('.upload-file').on('change', function(){

            if($(this).hasClass('upload-headerImg')){
                imgStr='<div class="thumbBox"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yL" style="width:145px;"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yR" style="width:145px;"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yT" style="width:200px;left:145px;"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yB" style="width:200px;left:145px;"></div>';
            }else{
                imgStr='<div class="thumbBox" style="width:300px;margin-left:-150px;"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yL"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yR"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yT"></div>'+
                    '<div class="thumbox-shadow thumbox-shadow-yB"></div>';
            }

            var imgContent=
             '<div class="m-container block-img-content" style="position:fixed;left:50%;top:66%;margin-top:-155px;z-index:1000;width:490px;height:310px;margin-left: -245px;">'+
             '<div class="imageBox" data-zoomin="0" style="width:100%;">'+
                 imgStr+
                '<div class="spinner" style="background:#fff;color:#01b040;">加载中...</div>'+
              '</div>'+
              '<div class="action tl" style="width:100%;"> '+
              '<input type="button" id="btnZoomOut" class="Btnsty_peyton Btnsty-release" >'+
              '<input type="button" id="btnZoomIn" class="Btnsty_peyton Btnsty-add" >'+             
              '<input type="button" id="btnCrop" style="margin-left:250px;"  class="Btnsty_peyton Btnsty-sure" value="确定">'+
              '<input type="button" id="btnclose"  class="Btnsty_peyton Btnsty-sure Btnsty-close" value="取消">'+
              '</div>'+
            '</div>';
            $(this).parent(".js_uploadBox").append(imgContent);
            if($(this).hasClass('upload-headerImg')){
                $("#btnCrop").addClass('upload-headerImg');
            }

            document.body.onmousewheel = function(){return false; }
            //document.body.DOMMouseScroll = function(){return false;}
            $("body").bind("DOMMouseScroll",function(event){
                event.preventDefault();
            })
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            //this.files = [];
        });


        $(document).on('click','#btnclose', function(){
            $(".m-container").remove();
            document.body.onmousewheel = function(){return true;}
            //document.body.DOMMouseScroll = function(){return true;}
            $("body").unbind("DOMMouseScroll");
            $(".m-container").remove();
            $('.upload-file').val('');
        });
            
        //点击确定按钮
        $(document).on('click','#btnCrop', function(){
            var img = cropper.getDataURL();
            if($(this).hasClass('upload-headerImg')){
                $("#upload-headImg").attr('src', ''+img+'');
                $(".m-container").remove();
            }else{

                //console.log(img);
                if($(".m-container").parent('.js_uploadBox').hasClass('js_uploadBox-first')){ 
                    $(".js_uploadBox-first").css('display', 'none');
                    $(".js_showBox").css('display', 'block');
                    $(".js_uploadBox-second").css('display', 'block');
                    $("#zi-img-show").attr('src', ''+img+'');
                    $("#zi-img-show").attr('data-id', '0');

                    $('#setting-index-img').hide();
                    $('#setting-index-img').next().hide();

                    var smallImg= '<div class="upload-zi-img pr tc fl zi-small-imglist cp">'+
                                  '<span class="small-firstImgShow">封面</span>'+
                                  '<img  class="smallImg" src="' + img + '" data-id="0" alt="" width="100%" height="100%">'+
                                  '</div>';

                    $(".js_uploadBox-second").before(smallImg);

                    $("#delete-big-img").attr('data-id', '0');
                    $("#setting-index-img").attr('data-id', '0');

                    $(".m-container").remove();
                }else{

                    $('#setting-index-img').html('设为封面');
                    $('#setting-index-img').show();
                    $('#setting-index-img').next().show();
                    
                    var smallImg= '<div class="upload-zi-img pr tc fl zi-small-imglist cp">'+
                                  '<span class="small-firstImgShow">封面</span>'+
                                  '<img  class="smallImg" src="' + img + '" data-id="'+imgnum+'" alt="" width="100%" height="100%">'+
                                  '</div>';

                    $(".js_uploadBox-second").before(smallImg);
                    imgnum=imgnum+1;
                    $(".m-container").remove();
                }
                var showAddimg=$(".zi-small-imglist").length;
                if (showAddimg >= 3) {
                    $(".js_uploadBox-second").css('display', 'none');
                }
            }

            document.body.onmousewheel = function(){return true;}
            //document.body.DOMMouseScroll = function(){return true;}
            $("body").unbind("DOMMouseScroll");

            $('.upload-file').val('');
        });

        //放大缩小
        $(document).on('click','#btnZoomIn', function(){
            cropper.zoomIn();
        });
        $(document).on('click','#btnZoomOut', function(){
            cropper.zoomOut();
        });

        //点击小图查看大图
        $(document).on('click','.zi-small-imglist', function(){

            var fm = $(this).children('span').css('display');
            if(fm == 'none'){
                $('#setting-index-img').html('设为封面');
            }
            if(fm == 'block'){
                $('#setting-index-img').html('取消设为封面');
            }

            var imgUrl=$(this).children('.smallImg').attr('src'),
                dataId=$(this).children('.smallImg').attr('data-id');
                $("#zi-img-show").attr('src',imgUrl); 
                $("#zi-img-show").attr('data-id', dataId);

                $(".right-set-img").children('span').attr('data-id', dataId);

                if($(this).children('.small-firstImgShow').css('display')=='none'){
                    $(".firstImgShow").css('display', 'none');
                }else{
                     $(".firstImgShow").css('display', 'block');
                }
                //$("#delete-big-img").attr('data-id', dataId);
                //$("#setting-index-img").attr('data-id', dataId);
        });



        // 鼠标经过遮罩层显示

        $(".zi-img-show").hover(function() {
            $(".opcityDiv").css('display', 'block');
        }, function() {
            $(".opcityDiv").css('display', 'none');
        });

        $("#setting-index-img,#delete-big-img").hover(function() {
            $(this).removeClass('colordbd');
        }, function() {
            $(this).addClass('colordbd');
        });

        //删除图片
        $(document).on("click", "#delete-big-img", function(event) {
        //$("#delete-big-img").click(function(event) {
            var deleteNum=$(this).attr('data-id');

            $('.zi-small-imglist').each(function(index, el) {
                var thisNum=$(this).children('img').attr('data-id');
                if(thisNum === deleteNum){
                    $(this).remove();
                }
            });

            var len = $('.zi-small-imglist').length;
            if(len <= 1){
                $('.small-firstImgShow').hide();
                $("#setting-index-img").hide();
                $("#setting-index-img").next().hide();
            }

            var defaultUrl=$('.zi-small-imglist').eq(0).children('.smallImg').attr('src'),
                defaultId =$('.zi-small-imglist').eq(0).children('.smallImg').attr('data-id'),
                smallLength=$('.zi-small-imglist').length;

                $("#zi-img-show").attr('src',defaultUrl);
                $("#zi-img-show").attr('data-id', defaultId);

                if($('.zi-small-imglist').eq(0).children('.smallImg').prev().css('display') == 'block'){
                    $("#setting-index-img").html('取消设为封面');
                }else{
                    $("#setting-index-img").html('设为封面');
                }

                $("#delete-big-img").attr('data-id', defaultId);
                $("#setting-index-img").attr('data-id', defaultId);

            $(".firstImgShow").css('display', 'none');

           if(smallLength == 0){
                $(".js_uploadBox-second").css('display', 'none');
                $(".js_uploadBox-first").css('display', 'block');
                $(".js_showBox").css('display', 'none');

            }else if(0 < smallLength < 3){
                $(".js_uploadBox-second").css('display', 'block');

               if(smallLength > 1){
                   $('.zi-small-imglist').each(function(index, el) {
                       //alert($(this).children('img').prev().css('display'))
                       var curCss  = $(this).children('img').prev().css('display')
                       var thisNum = $(this).children('img').attr('data-id');
                       if(curCss == 'block'){
                           if(thisNum == 0){
                               $('.firstImgShow').css('display', 'block');
                           }
                       }
                   });
               }
            }
        });


        //设置为封面
        $(document).on("click", "#setting-index-img", function(event) {
        //$("#setting-index-img").click(function(event) {

            var zis = $('#zi-img-show').next().css('display');
            if(zis == 'none'){
                $(".firstImgShow").css('display', 'block');
                var setNum=$(this).attr('data-id');

                $('.zi-small-imglist').each(function(index, el) {
                    $(this).children('.small-firstImgShow').css('display', 'none');

                    var thisNum=$(this).children('img').attr('data-id');
                    if(thisNum === setNum){
                        $(this).children('.small-firstImgShow').css('display', 'block');
                    }
                });
                $("#setting-index-img").html('取消设为封面');
            }

            if(zis == 'block'){
                $(".firstImgShow").css('display', 'none');
                var setNum=$(this).attr('data-id');

                $('.zi-small-imglist').each(function(index, el) {
                    $(this).children('.small-firstImgShow').css('display', 'none');
                });
                $("#setting-index-img").html('设为封面');
            }

        });
    });